<template>
<div class="header">
  <van-nav-bar
  left-arrow
  @click-left="onClickLeft"
>
</van-nav-bar>
</div>
<div class="video">
  <!-- <img :src="videoImg" alt=""> -->
  <vue-danmaku ref="danmus" :danmus="danmaku" :speeds="120"></vue-danmaku>
</div>
<div class="mainWrap">
  <div class="pickBar">
  <van-tabs>
  <van-tab title="简介"><div class="msg">
    <div class="staff" v-if="staff.length">创作团队{{staff.length}}人
      <div class="staffWrap">
      <div class="staffMsg" v-for="staffItem in staff" :key="staffItem.mid">
        <div class="img">
            <img :src="staffItem.face" alt="">
            <div class="staffTitle">{{staffItem.title}}</div>
        </div>
         <div>
           <div class="staffName">{{staffItem.name}}</div>   
         </div>    
      </div>
      </div>

    </div>
    
  <div class="userMsg" v-else>
    <div class="avator">
      <img :src="owner.face" alt="">
    </div>
    <div class="name">{{owner.name}}</div>
  </div>
  <div class="videoTitle">
    {{video.title}}
    <div @click="closeDescMenu" v-if="showDesc"  class="down"><van-icon name="arrow-up" /></div>
    <div @click="showDescMenu" v-else  class="down"><van-icon name="arrow-down" /></div>
  </div>
  <div class="watchMsg">
    <van-icon name="play-circle-o" />{{stat.view}} &nbsp;&nbsp; <van-icon name="coupon-o" />{{stat.danmaku}}&nbsp;&nbsp; {{time}}
  </div>
   <div class="desc descShow" v-if="showDesc">

     <div class="bvid_enable">{{video.bvid}}&nbsp;&nbsp;<van-icon name="close" color="red" />未经作者授权禁止转载</div>

      <div v-html="desc"></div>
      
      
 </div>
 <div class="userAct">
   <div class="like">
     <img src="../images/dianzan.png" alt="">
     {{stat.like}}
   </div>
   <div class="dislike">
     <img src="../images/cai.png" alt="">
     不喜欢
   </div>
   <div class="coin">
     <img src="../images/toubi.png" alt="">
     {{stat.coin}}
   </div>
   <div class="favorite">
     <img src="../images/shoucang.png" alt="">
     {{stat.favorite}}
   </div>
   <div class="share">
     <img src="../images/zhuanfa.png" alt="">
     {{stat.share}}
   </div>
 </div>
</div>
<recommend />
</van-tab>
  <van-tab :title="`评论${stat.reply}`">
     <div class="pinglun">
          <div class="Dheader">
            <div class="avator">
              <img src="../images/bili.png" alt="" />
            </div>
            <div class="Dname">用户1</div>
          </div>
          <div class="newMsg">
            厉害厉害！
          </div>
          <div class="footer">
            <div class="Dshare">
              <img src="../images/zhuanfa.png" alt="" />
            </div>
            <div class="Dislike">
              <img src="../images/cai.png" alt="" />
            </div>
            <div class="Dlike">
              <img src="../images/dianzan.png" alt="" />
            </div>
          </div>
         
        </div>
        <div class="pinglun">
          <div class="Dheader">
            <div class="avator">
              <img src="../images/bili.png" alt="" />
            </div>
            <div class="Dname">用户2</div>
          </div>
          <div class="newMsg">
            大佬厉害！
          </div>
          <div class="footer">
            <div class="Dshare">
              <img src="../images/zhuanfa.png" alt="" />
            </div>
            <div class="Dislike">
              <img src="../images/cai.png" alt="" />
            </div>
            <div class="Dlike">
              <img src="../images/dianzan.png" alt="" />
            </div>
          </div>
         
        </div>
  </van-tab>
</van-tabs>
</div>
 <div class="danmakuWrap">
   <input class="danmaku" v-model="danmuStr" type="text" placeholder="发送弹幕">
   <button class="btn" @click="pushDanmu">发送</button>
 </div>

</div>


</template>

<script setup>
import { getByBvid,getDanmus } from '../api';
import { onMounted, ref } from '@vue/runtime-core'
import { useRoute,useRouter } from 'vue-router'
import { getLocal } from '../common/js/utils';
import recommend from '../components/recommend.vue';
import vueDanmaku from 'vue3-danmaku'
import { Toast } from 'vant';

const showDesc = ref(false)
const desc = ref(String)
const video = ref({})
const videoImg = ref()
const staff = ref([])
const stat = ref({})
const time = ref(String)
const owner = ref({})
const route = useRoute()
const router = useRouter()
const { Bvid } = route.query
const danmaku = ref([])
const danmuStr = ref('')
const danmus = ref()

onMounted(() => {
  // console.log(Bvid);
  getByBvid(Bvid).then(res => {
    // console.log(res);
    video.value = res
    owner.value = res.owner
    time.value = new Date(res.ctime*1000).toLocaleString()
    stat.value = res.stat
    desc.value = res.desc.replaceAll('\n' , '<br>')
    videoImg.value = res.pages[0].first_frame
    if(res.staff) {
      staff.value = res.staff
    }
    getDanmus().then(res => {
      // console.log(res);
      danmaku.value = res.danmus
    })
  })
})
//发送弹幕
const pushDanmu = () => {
  // console.log(danmuStr.value);
  // console.log(111);
   let token = getLocal('token')
//  console.log(getLocal('token'));
  if(!token) {
    Toast.fail('您还没有登录！')
    setTimeout(() => {
      router.push('/login')
    },1000)
   
  }
  danmus.value.add(danmuStr.value)
}
//打开描述
const showDescMenu = () => {
  showDesc.value = true
}
//关闭描述
const closeDescMenu = () => {
  showDesc.value = false
}
//返回上页
const onClickLeft = () => {
  // history.back()
  router.back(-1)
  }
</script>

<style scoped>
.video{
  height: 240px;
  background: linear-gradient(45deg, #5ac381, #20568b);
}
.header{
position: fixed;
background-color: #fff;
z-index: 99;
}
.vue-danmaku{
  height: 100%;
}
.video img{
  width: 100%;
  height: 200px;
}
.pickBar {
    width: 50%;
}
.mainWrap{
  display: flex;
  padding-left:10px;
}
.userMsg{
  display: flex;
  width: calc(100vw - 10px)
}
.staffMsg{
  margin-right: 25px;
  padding-top: 10px;
  padding-bottom: 20px;
  width: 50px;
  height: 50px;
  text-align: center;
}
.staffName{
  font-size: 4px;
  white-space: nowrap;
  margin-top: 25px;
}
.avator img, .staffMsg img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.staffWrap{
  display: flex;
   width: calc(100vw - 10px);
   padding-bottom: 20px;
}
.danmakuWrap{
  height: 20px;
  display: flex;
  margin-top: 8px;
}
.danmaku{
   height: 20px;
   width: 100px;
}
.btn{
  margin-left: 5px;
  height: 27px;
  width: 60px;
  font-size: 10px;
}
.videoTitle{
  display: flex;
  width: calc(100vw - 10px) ;
  font-size: 16px;
  justify-content: space-between;
}
.down{
  margin-right: 10px;
}
.descIndex{
  padding-left: 0 10px;
  width: calc(100vw - 20px);
  height: 0;
  overflow: hidden;
}
.descShow{
  padding-left: 0 10px;
  width: calc(100vw - 20px);
  height: auto;
  color: #aaa;
  font-size: 14px;
  transition: 1s;
}
.watchMsg{
  width: calc(100vw - 20px);
  color: #aaa;
  font-size: 15px;
}
.bvid_enable{
  padding: 10px 0;
}
.staffTitle{
  position: relative;
  font-size: 6px;
  margin-top: -44px;
  margin-left: 10px;
  width: 50px;
  border: 1px solid pink;
  background: #fff;
  color: pink;
  white-space: nowrap;
}
.userAct{
  display: flex;
  padding: 8px 15px;
  justify-content: space-between;
  width: calc(100vw - 60px);
}
.userAct img{
 width: 30px;
 height: 30px;
 margin-left: 10px;
}
.like, .dislike, .coin, .favorite, .share{
  display: flex;
  flex-direction: column;
  height: 50px;
  width: 50px;
  text-align: center;
  font-size: 14px;
  color: #aaa;
}
.pinglun{
  width: 350px;
  margin-top: 10px;
  border-bottom: 1px solid #aaa;
}
.Dheader {
  display: flex;
  margin-left: 10px;
}
.header img {
  width: 50px;
  height: 50px;
  padding-right: 10px;
  border-radius: 30px;
}
.Dname {
  height: 50px;
  margin-top: 5px;
  margin-left: 10px;
  justify-content: center;
}
.newMsg {
  margin-left: 10px;
}
.footer {
  display: flex;
  padding: 10px 40px;
  width: calc(100% -80px);
  justify-content: space-between;
}
.Dlike img,.Dshare img,.Dislike img{
  width: 15px;
  height: 15px;
}
</style>